import { ChangeEvent, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import styles from "./login.module.scss";
import initLoginBg from "./init.ts";
import { Input, Space, Button, message } from "antd";
import "antd/dist/antd.css"; // or 'antd/dist/antd.less'
import "./login.less";
import { CaptchaAPI, LoginAPI } from "@/request/api";

export default function login() {
  let navigateTo = useNavigate();
  // 加载完这个组件后,加载背景
  useEffect(() => {
    initLoginBg();
    window.onresize = function () {
      initLoginBg();
    };
    getCaptchaImg();
  }, []);

  // 定义变量存储用户信息
  const [usernameVal, setUsernameVal] = useState(""); // 定义用户输入信息
  const [passwordVal, setPasswordVal] = useState(""); // 定义用户输入信息
  const [captchaVal, setCaptchaVal] = useState(""); // 定义用户输入信息
  // 保存验证码信息
  const [captchaImg, setCaptchaImg] = useState("");

  // 事件函数
  const usernameChange = (e: ChangeEvent<HTMLInputElement>) => {
    // 获取用户输入的用户名
    setUsernameVal(e.target.value);
  };
  const passwordChange = (e: ChangeEvent<HTMLInputElement>) => {
    // 获取用户输入的密码
    setPasswordVal(e.target.value);
  };
  const captchaChange = (e: ChangeEvent<HTMLInputElement>) => {
    // 获取用户输入的验证码
    setCaptchaVal(e.target.value);
  };
  // 点击登录按钮登录事件
  const gotoLogin = async () => {
    console.log(usernameVal, passwordVal, captchaVal);

    // 验证是否有空值
    if (!usernameVal.trim() || !passwordVal.trim() || !captchaVal.trim()) {
      message.warning("请输入完整信息！");
      return;
    }
    let LoginAPIRes = await LoginAPI({
      username: usernameVal,
      password: passwordVal,
      code: captchaVal,
      uuid: localStorage.getItem("uuid") as string,
    });
    console.log(LoginAPIRes);
    if (LoginAPIRes.code === 200) {
      // 1 提示登录成功
      message.success("登录成功！");
      // 2 保存token
      localStorage.setItem("manage-client-token", LoginAPIRes.token);
      // 3 跳转
      navigateTo("/page1");
      // 4 删除本地的uuid
      localStorage.removeItem("uuid");
    }
  };
  // 验证码请求
  const getCaptchaImg = async () => {
    // CaptchaAPI().then((res) => {
    //   console.log(res);
    // });
    // await处理
    let captchaAPIRes = await CaptchaAPI();
    console.log(captchaAPIRes);
    if (captchaAPIRes.code === 200) {
      // 1 验证码渲染
      setCaptchaImg("data:image/gif;base64," + captchaAPIRes.img);
      // 2 本地保存 uuid 给登录时使用
      localStorage.setItem("uuid", captchaAPIRes.uuid);
    }
  };

  return (
    <div className={styles.loginPage}>
      {/* 存放背景 */}
      <canvas id="canvas" style={{ display: "block" }}></canvas>
      <div className={styles.loginBox + " loginbox"}>
        <div className={styles.title}>
          <h1>唐诗几男子·通用后台系统</h1>
          <p>Strive Everyday</p>
        </div>
        <div className="form">
          <Space direction="vertical" size="large" style={{ display: "flex" }}>
            <Input placeholder="用户名" onChange={usernameChange} />
            <Input.Password placeholder="密码" onChange={passwordChange} />
            <div className="captchaBox">
              <Input placeholder="验证码" onChange={captchaChange} />
              <div className="captchaImg" onClick={getCaptchaImg}>
                <img height="38" src={captchaImg} alt="" />
              </div>
            </div>
            <Button
              type="primary"
              block
              className="loginBtn"
              onClick={gotoLogin}
            >
              登录
            </Button>
          </Space>
        </div>
      </div>
    </div>
  );
}
